<template>

  <div class="mod-config mod-menu">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-date-picker
          v-model="dataForm.dateRange"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          size="small"
        >
        </el-date-picker>

      </el-form-item>
      <el-form-item>
        <el-button  type="primary" size="small" icon="el-icon-edit" @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table height="calc(100% - 200px)" :data="dataList" border style="width: 100%;" show-summary
              :summary-method="summariesFuncGet"
    >
      <el-table-column type="index" header-align="center" align="center" label="序号"  width="70"></el-table-column>

      <table-tree-column prop="deviceName" header-align="center" treeKey="deviceId" width="150" label="产线">
      </table-tree-column>
      <el-table-column prop="sumCountWeightTon" header-align="center" align="center" width="120" label="设备产量（吨）">
      </el-table-column>
      <el-table-column prop="deviceSuccessRate" header-align="center" align="center" width="120" label="设备合格率">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deviceSuccessRate > 65" size="small" type="success">  {{parseFloat(scope.row.deviceSuccessRate.toFixed(2))}}</el-tag>
          <el-tag v-else size="small"  type="danger">{{parseFloat(scope.row.deviceSuccessRate.toFixed(2))}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="deviceSumProductNumber" header-align="center" align="center" width="120" label="设备生产数量">
        <template slot-scope="scope">
          <el-tag size="small" type="success">  {{scope.row.deviceSumProductNumber}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="countDischargeVolume" header-align="center" align="center" width="120" label="设备出料量">
        <template slot-scope="scope">
          <el-tag size="small" type="success">  {{parseFloat(scope.row.countDischargeVolume.toFixed(2))}}</el-tag>
        </template>
      </el-table-column>
<!--      白班-->
      <el-table-column prop="morningClassUserName" header-align="center" align="center" width="120" label="白班人员">

      </el-table-column>
      <el-table-column prop="morningClassSuccessRate" header-align="center" align="center" width="120" label="白班合格率">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.morningClassSuccessRate > 65" size="small" type="info">  {{parseFloat(scope.row.morningClassSuccessRate.toFixed(3))}}</el-tag>
          <el-tag v-else size="small"  type="danger">{{parseFloat(scope.row.morningClassSuccessRate.toFixed(4))}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="morningClassCountWeightTon" header-align="center" align="center" width="120" label="白班产量（吨）">
        <template slot-scope="scope">
          <el-tag  size="small" type="info">  {{parseFloat(scope.row.morningClassCountWeightTon.toFixed(4))}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="morningClassCountProductValue" header-align="center" align="center" width="120" label="白班产值">
        <template slot-scope="scope">
          <el-tag  size="small" type="info">  {{parseFloat(scope.row.morningClassCountProductValue.toFixed(4))}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="morningClassDeviceProductNumber" header-align="center" align="center" width="120" label="白班生产数量">
        <template slot-scope="scope">
          <el-tag  size="small" type="info">  {{scope.row.morningClassDeviceProductNumber}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="morningClassDischargeVolume" header-align="center" align="center" width="120" label="白班出料量">
        <template slot-scope="scope">
          <el-tag  size="small" type="info">  {{parseFloat(scope.row.morningClassDischargeVolume.toFixed(4))}}</el-tag>
        </template>
      </el-table-column>
<!--      中班-->

<!--      <el-table-column prop="middleClassSuccessRate" header-align="center" align="center" width="120" label="中班合格率">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag v-if="scope.row.middleClassSuccessRate > 65" size="small" type="success">  {{scope.row.middleClassSuccessRate?parseFloat(scope.row.middleClassSuccessRate.toFixed(4)):'暂无数据'}}</el-tag>-->
<!--          <el-tag v-else size="small"  type="warning">{{scope.row.middleClassSuccessRate?parseFloat(scope.row.middleClassSuccessRate.toFixed(4)):'暂无数据'}}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="middleClassCountWeightTon" header-align="center" align="center" width="120" label="中班产量（吨）">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag  size="small"  type="warning">{{scope.row.middleClassCountWeightTon?parseFloat(scope.row.middleClassCountWeightTon.toFixed(4)):'暂无数据'}}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="middleClassCountProductValue" header-align="center" align="center" width="120" label="中班产值">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag  size="small"  type="warning">{{scope.row.middleClassCountProductValue?parseFloat(scope.row.middleClassCountProductValue.toFixed(4)):'暂无数据'}}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--      晚班-->
      <el-table-column prop="nightClassUserName" header-align="center" align="center" width="120" label="晚班人员"></el-table-column>

      <el-table-column prop="nightClassSuccessRate" header-align="center" align="center" width="120" label="晚班合格率">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.nightClassSuccessRate > 65" size="small" type="primary">  {{scope.row.nightClassSuccessRate?parseFloat(scope.row.nightClassSuccessRate.toFixed(4)):'暂无数据'}}</el-tag>
          <el-tag v-else size="small"  type="danger">{{scope.row.nightClassSuccessRate?parseFloat(scope.row.nightClassSuccessRate.toFixed(4)):'暂无数据'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="nightClassCountWeightTon" header-align="center" align="center" width="120" label="晚班产量（吨）">
        <template slot-scope="scope">
          <el-tag  size="small"  type="primary">{{scope.row.nightClassCountWeightTon?parseFloat(scope.row.nightClassCountWeightTon.toFixed(4)):'暂无数据'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="nightClassCountProductValue" header-align="center" align="center" width="120" label="晚班产值">
        <template slot-scope="scope">
          <el-tag  size="small"  type="primary">{{scope.row.nightClassCountProductValue?parseFloat(scope.row.nightClassCountProductValue.toFixed(4)):'暂无数据'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="nightClassDeviceProductNumber" header-align="center" align="center" width="120" label="晚班生产数量">
        <template slot-scope="scope">
          <el-tag  size="small"  type="primary">{{scope.row.nightClassDeviceProductNumber?parseFloat(scope.row.nightClassDeviceProductNumber.toFixed(4)):'暂无数据'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="nightClassDischargeVolume" header-align="center" align="center" width="120" label="晚班出料量">
        <template slot-scope="scope">
          <el-tag  size="small"  type="primary">{{scope.row.nightClassDischargeVolume?parseFloat(scope.row.nightClassDischargeVolume.toFixed(4)):'暂无数据'}}</el-tag>
        </template>
      </el-table-column>



    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
  </div>
</template>

<script>
  import TableTreeColumn from '@/components/table-tree-column'
  import basicMixins from '@/utils/commonViewMixins'
  import {mRequest, mRequestPromise} from '@/utils/request'
  import {treeDataTranslate} from '@/utils'
  import {getFormatDateTime} from '../../../utils'

  export default {
    mixins: [basicMixins],
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataForm: {
          dateRange: ''
        },
        dataList: [],
        showAttrs: {
          index:'序号',
          deviceName:'序号',
          sumCountWeightTon:'sumCountWeightTon',
          morningClassCountWeightTon:'序号',
          morningClassSuccessRate:'序号',
        },
       // sumInfo: {sumCountWeightTon:'sumCountWeightTon',morningClassCountWeightTon:'morningClassCountWeightTon',morningClassSuccessRate:'morningClassSuccessRate'},

      }
    },
    components: {
      TableTreeColumn
    },
    activated() {
      this.getDataList()
    },
    methods: {
      getDataList() {
        let startDateTime = ''
        let endDateTime = ''

        if (this.dataForm.dateRange instanceof Array) {
          startDateTime = getFormatDateTime(new Date(this.dataForm.dateRange[0]))
          endDateTime = getFormatDateTime(new Date(this.dataForm.dateRange[1]))
        }
        this.dataListLoading = true
        mRequest('dayApi/getDayProductLeadCountByTime', {startDateTime:startDateTime, endDateTime: endDateTime}, ({data}) => {
          this.dataArray = data
          this.dataList = treeDataTranslate(this.dataArray, 'menuId')
          this.dataListLoading = false
        })
      },
      summariesFuncGet(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计:'
          }else {

            if (index == 3 || index == 7 || index == 13) {
              const values = data.map(item => Number(item[column.property]))
              if (!values.every(value => isNaN(value))) {
                sums[index] = (values.reduce((prev, curr) => {
                  const value = Number(curr)
                  if (!isNaN(value)) {
                    // 保存了两位小数点
                    return (Math.floor((prev + curr) * 100) / 100)
                  } else {
                    // 保存了两位小数点
                    return (Math.floor(prev * 100) / 100 )
                  }
                }, 0)/6).toFixed(2)
                sums[index] += ' ';
              }
            } else {
              const values = data.map(item => Number(item[column.property]))
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr)
                  if (!isNaN(value)) {
                    // 保存了两位小数点
                    return Math.floor((prev + curr) * 100) / 100;
                  } else {
                    // 保存了两位小数点
                    return Math.floor(prev * 100) / 100;
                  }
                }, 0)
                sums[index] += ' ';
              }
            }

          }
        })
          return sums
        }
      }

  }
</script>
<style lang="scss">
  .mod-config：{
    height: 80%;
  }
  .mod-menu__icon-list {
    max-height: 300px;
    width: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .mod-menu {
    .menu-list__input,
    .icon-list__input {
      > .el-input__inner {
        cursor: pointer;
      }
    }

    &__icon-popover {
      max-width: 370px;
    }

    &__icon-list {
      max-height: 180px;
      padding: 0;
      margin: -8px 0 0 -8px;

      > .el-button {
        padding: 8px;
        margin: 8px 0 0 8px;

        > span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }

    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
